<template>
  <div>
    <div class="gz">
      <span
        class="iconfont icon-zuoyoujiantou"
        @click="$router.push('/recommend')"
        >我的关注</span
      >
    </div>

    <div class="follist" v-for="(item, index) in follolist" :key="index" >
        <div
          class="folimg"
          :style="'background-image: url(' + item.avatarUrl + ')'"
        ></div>
        <p class="fname">
          {{ item.nickname }}
          <span
            class="fnicon"
            :style="
              'background-image: url(' + item.avatarDetail.identityIconUrl + ')'
            "
          ></span>
        </p>
        <p class="fans">粉丝：{{ item.followeds | playCountData }}</p>
    </div>
  </div>
</template>

<script>
import { getUserFollows } from "../api/base";
export default {
  data() {
    return {
      follolist: [],
    };
  },
  methods: {
    getUserFollowsFun() {
      this.userId = window.localStorage.getItem("uid");
      getUserFollows({ uid: this.userId }).then((data) => {
        console.log(data.follow);
        this.follolist = data.follow;
      });
    },
  },
  created() {
    this.getUserFollowsFun();
  },
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
.gz {
  height: 50px;
  position: relative;
  background-color: #d4473c;
  span {
    font-size: 18px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
  }
}
.follist {
  margin: 10px 10px;
  // margin-top: 10px;
  height: 120px;
  // margin-left: 10px;
  border: 1px solid white;
  border-bottom: 1px solid #cccccc;
  position: relative;
  .folimg {
    width: 90px;
    height: 90px;
    // position: absolute;
    // border: 1px solid black;
    border-radius: 50%;
    background-size: cover;
    // line-height: 50px;
    margin-top: 15px;
  }
  .fname {
    position: absolute;
    margin-left: 120px;
    margin-top: -80px;
    font-size: 18px;
    .fnicon {
      position: absolute;
      margin-left: 5px;
      margin-top: 5px;
      width: 15px;
      height: 15px;
      background-size: cover;
    }
  }
  .fans {
    position: absolute;
    margin-left: 120px;
    margin-top: -50px;
    font-size: 13px;
    color: #878787;
  }
}
</style>